// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '@/pages/About.vue'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import Details from '@/pages/Details.vue'
import ShowInfo from '@/pages/ShowInfo.vue'


const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
            //meta：Vue提供的存储路由数据的地方，称为路由元信息（开发者自定义）
            meta: { title: '关于' }
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: { title: '主页' },
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: { isAuth: true, title: '新闻' }
                },
                {
                    name: 'xinxi',
                    path: 'details',
                    component: Details,
                    meta: { isAuth: true, title: '消息' },
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'showInfo/:id/:value',
                            meta: { isAuth: true, title: '详情' },
                            component: ShowInfo,

                            //这样定义后，组件中获取参数过多时很麻烦，所以Vue通过props方式解决

                            //1：props第一种对象写法，传递固定数据，可在组件直接通过props接收并使用。 用的比较少。
                            //props: { a: 1, b: 'hello' }

                            //2：props第二种写法，值为布尔值。
                            //若布尔值为真，就会把该路由收到的所有params参数，以props形式传递给组件
                            //props: true

                            //3：props第三种写法，定义一个带返回值回调函数，VUE会调用
                            //可接收当前路由，可直接获取并通过props传递给组件（可兼容query方式！！！）
                            props(route) {
                                return {
                                    //id:route.query.id,
                                    id: route.params.id,
                                    value: route.params.value
                                    //可扩展更多参数
                                }
                            }
                        }
                    ]
                }
            ]
        },
    ]
})


//前置路由守卫      1初始化的时候调用，2每次路由切换时调用
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫触发')
    console.log(to, from, next)
    //1：使用Vue自带功能，实现指定路由跳转控制（path或name都可以）
    // if (to.path === '/home/news' || to.name === 'xinxi') {

    //2：通过路由配置中自定义标识控制
    if (to.meta.isAuth) {
        if (localStorage.getItem('school') === 'atguigu') {
            next()
        } else {
            alert('学校名不对，无权查看')
        }
    } else {
        //默认会全部拦截，调用next()方法才可以放行
        next()
    }
})


//后置路由守卫   后置路由守卫没有next（不再需要判断权限）
router.afterEach((to, from) => {
    console.log('后置路由守卫触发')
    console.log(to, from)

    //后置路由使用场景：对校验通过的路由数据做进一步处理，避免在前置路由多级判断时机问题

    //动态切换页签内容
    document.title = to.meta.title || '硅谷系统'
})



//暴露路由器
export default router;
